<template>
  <div>
    <!--1视图-->

    <el-button type="success" size="small" @click="oppAdd">添加</el-button>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="sname"
          label="首字母"
          width="120">
      </el-table-column>
      <el-table-column
          prop="px"
          label="排序"
          width="120">
      </el-table-column>
    </el-table>

    <el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="首字母" :label-width="formLabelWidth">
          <el-input v-model="form.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
export default {
  name: "TypeView",
  data() {
    var validateUnion = (rule, value, callback) => {

      this.axios.get("type/getTypeName?name="+value).then(res=> {
        if(res.data.data!=null){
          callback(new Error('该品牌已经存在.'));
        }else{
          callback();
        }

      })
    };
    return {
      //2属性定义
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          { validator: validateUnion, trigger: 'blur' }
        ],
      },
      form:{},
      dialogFormVisible:false,
      formLabelWidth:'120px',
      tableData:[],
    }
  }, methods: {
    //3自定义方法
    add(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("type/add",this.form).then(res=>{
            if(res.data.code==200){
              this.$message.success(res.data.msg);
              this.dialogFormVisible=false;
              this.list();
            }else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    oppAdd(){
        this.dialogFormVisible=true;
        this.list();
        this.form={};
    },
    list(){
      this.axios.post("type/list").then(res=>{
        this.tableData=res.data.data;
      })
    }
  }, created() {
    //4.钩子函数
    this.list();
  }
}
</script>

<style scoped>

</style>